﻿// Copyright (C) 2022 The Qt Company Ltd.
// SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause

import QtQuick

/*实现一个矩形，根据序号，突出显示序号对应页面的标题。并点击页面标题时发送titleClicked信号。
*/
Rectangle    {
    id: titleBar
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    height: GameSettings.fieldHeight
    color: GameSettings.viewColor

    //property var __titles: ["scan", "connect", "Cal", "PLC", "Set", "BOOT","KEY","LAJI"]      //自定义属性。
    property var __titles: ["扫描", "连接", "按键", "升级"]     //自定义属性。
    property int currentIndex: 0                                //__titles[currentIndex]如此配对使用吗？

    signal titleClicked(int index)

    Repeater {
        model: 4
        Text {
            width: titleBar.width / 4           //水平3等分。
            height: titleBar.height
            x: index * width
            horizontalAlignment: Text.AlignHCenter
            verticalAlignment: Text.AlignVCenter
            text: __titles[index]
            font.pixelSize: GameSettings.tinyFontSize
            color: titleBar.currentIndex === index ? GameSettings.textColor : GameSettings.disabledTextColor        //它怎么执行的吧？

            MouseArea {
                anchors.fill: parent                //在titleBar区域
                onClicked: titleClicked(index)      //发信号，参数是当前的页面序号，[0,2]。
            }
        }
    }


    /*在选择的文字下方，显示一根粗线（颜色是？）
    */
    Item {
        anchors.bottom: parent.bottom
        width: parent.width / 4
        height: parent.height
        x: currentIndex * width             //根项目定义的属性。

        BottomLine{}

        Behavior on x { NumberAnimation { duration: 200 } }
    }

}
